<template>
  <a-card style="width: 100%">
    <div class="header">
      <a-space class="left" direction="vertical" :size="[8, 12]">
        <Condition
          :condition="condition"
          :btns="['reset']"
          @search="onSearch"
          @reset="conditionReset"
        ></Condition>
        <div class="title">共筛选出 {{ pagination.total }} 条数据</div>
      </a-space>
      <a-space class="right" direction="vertical" :size="[8, 12]">
        <a-input-search
          v-model:value="templateName"
          placeholder="请输入运动方案名称"
          style="width: 220px"
          @search="onSearch"
        />
        <a-button type="primary" @click="modalShow()">新建运动方案</a-button>
      </a-space>
    </div>
    <div class="main">
      <a-table
        class="table"
        size="small"
        :loading="loading"
        :dataSource="List"
        :columns="columns"
        :pagination="pagination"
        @change="paginationChange"
        :sticky="{ offsetHeader: 0 }"
      >
        <template #bodyCell="{ column, text, index, record }">
          <template v-if="column.dataIndex === 'no'">
            {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
          </template>
          <template v-else-if="column.dataIndex === 'createTime'">
            {{ timeFilter(record[column.dataIndex]) }}
          </template>
          <template v-else-if="column.dataIndex === 'managePath'">
            <div class="tags" v-if="record[column.dataIndex]">
              <a-tag
                type="parmary"
                :title="item"
                v-for="(item, i) in record[column.dataIndex].split(', ')"
                :key="i"
                >{{ item }}</a-tag
              >
            </div>
          </template>
          <template v-else-if="column.dataIndex === 'action'">
            <a-button type="link" @click="modalShow(record)">查看详情</a-button>
            <a-button
              type="link"
              @click="delForm(record)"
              :disabled="record.managePath ? true : false"
              >删除方案</a-button
            >
          </template>
          <template v-else>
            {{ text }}
          </template>
        </template>
      </a-table>
    </div>
    <a-modal
      width="850px"
      v-model:open="modal.open"
      :title="modal.title"
      ok-text="确认"
      cancel-text="取消"
      @ok="modalConfirm"
      :maskClosable="false"
    >
      <a-form
        class="modelForm"
        ref="modelForm"
        :colon="false"
        :model="formState"
        :label-col="{ style: { width: '105px' } }"
        :disabled="modal.type === 'detail'"
        labelAlign="left"
      >
        <a-form-item
          label="模板类型"
          name="templateAffiliation"
          required
          v-if="modal.type != 'detail' && !formState.id"
        >
          <a-select v-model:value="formState.templateAffiliation">
            <a-select-option label="公共模板" value="公共模板"> 公共模板 </a-select-option>
            <a-select-option label="个人模板" value="个人模板"> 个人模板 </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="运动方案名称"
          name="templateName"
          required
          :rules="{
            required: true,
            message: '运动方案名称不能为空',
            trigger: 'change',
            whitespace: true
          }"
        >
          <a-tooltip
            v-if="modal.type === 'detail'"
            placement="bottomLeft"
            :title="formState.templateName"
          >
            <a-input
              style="width: 350px"
              v-model:value="formState.templateName"
              autocomplete="off"
              placeholder="请输入运动方案名称"
              :maxlength="50"
            ></a-input>
          </a-tooltip>
          <a-input
            v-else
            style="width: 350px"
            v-model:value="formState.templateName"
            autocomplete="off"
            :maxlength="50"
            placeholder="请输入运动方案名称"
          ></a-input>
        </a-form-item>
        <a-form-item required style="margin-bottom: -16px" label="运动方案内容:" labelAlign="left">
        </a-form-item>

        <a-tabs v-model:activeKey="sportWeekIndex">
          <a-tab-pane
            :key="index"
            :tab="`${weekLabel[item.day - 1]}运动`"
            v-for="(item, index) in formState.content.week"
          >
            <a-form-item label="运动类型" required>
              <a-radio-group
                @change="changesportType(item, index, $event)"
                :options="sportTypeData"
                v-model:value="item.sportType"
              />
            </a-form-item>
            <template v-if="item.sportType != '3'">
              <a-form-item label="有氧运动" required v-if="item.sportType == '1'">
                <a-select
                  v-model:value="item.aerobicSport.sportName"
                  showSearch
                  :options="aerobicData"
                  placeholder="请选择运动"
                  :listHeight="200"
                  @change="aerobicChange(item, index, $event)"
                />
                <a-form-item-rest>
                  <a-input-number
                    v-model:value="item.aerobicSport.total"
                    style="margin: 0 8px; width: 150px"
                    step="1"
                    min="1"
                    :precision="0"
                    :formatter="formatter"
                    :parser="parser"
                    addon-after="分钟"
                  />
                </a-form-item-rest>
              </a-form-item>
              <a-form-item label="抗阻动作" required v-if="item.sportType == '2'">
                <div class="sport-group">
                  <div
                    class="sport-name"
                    v-for="(sport, sportIndex) in item.resistanceSports"
                    :key="sportIndex"
                  >
                    <span>
                      {{ sport.sportName }}，
                      <span
                        class="sport-time"
                        @click="showSport('resistanceSports', 'edit', sportIndex)"
                      >
                        每组
                        {{ sport.total }}
                        次
                      </span>
                    </span>

                    <CloseOutlined
                      class="sport-del-icon"
                      @click="delSport('resistanceSports', sportIndex)"
                      v-if="modal.type !== 'detail'"
                    />
                  </div>
                  <div
                    class="sport-btn"
                    v-if="modal.type !== 'detail'"
                    @click="showSport('resistanceSports', 'add')"
                  >
                    新增
                    <PlusOutlined class="icon-add" />
                  </div>
                </div>
              </a-form-item>
              <a-form-item label="动作组数" required v-if="item.sportType == '2'">
                <a-input-number
                  v-model:value="item.groupNum"
                  step="1"
                  min="1"
                  :precision="0"
                  addonAfter="组"
                  :formatter="formatter"
                  :parser="parser"
                />
              </a-form-item>
              <a-form-item label="热身运动" required>
                <div class="sport-group">
                  <div
                    class="sport-name"
                    v-for="(sport, sportIndex) in item.warmupSports"
                    :key="sportIndex"
                  >
                    <span>
                      {{ sport.sportName }}，
                      <span
                        class="sport-time"
                        @click="showSport('warmupSports', 'edit', sportIndex)"
                      >
                        {{ sport.total }}
                        次
                      </span>
                    </span>

                    <CloseOutlined
                      class="sport-del-icon"
                      @click="delSport('warmupSports', sportIndex)"
                      v-if="modal.type !== 'detail'"
                    />
                  </div>
                  <div
                    class="sport-btn"
                    v-if="modal.type !== 'detail'"
                    @click="showSport('warmupSports', 'add')"
                  >
                    新增
                    <PlusOutlined class="icon-add" />
                  </div>
                </div>
              </a-form-item>
              <a-form-item label="拉伸运动" required>
                <div class="sport-group">
                  <div
                    class="sport-name"
                    v-for="(sport, sportIndex) in item.stretchSports"
                    :key="sportIndex"
                  >
                    <span>
                      {{ sport.sportName }}，
                      <span
                        class="sport-time"
                        @click="showSport('stretchSports', 'edit', sportIndex)"
                      >
                        {{ sport.total }}
                        s
                      </span>
                    </span>

                    <CloseOutlined
                      class="sport-del-icon"
                      @click="delSport('stretchSports', sportIndex)"
                      v-if="modal.type !== 'detail'"
                    />
                  </div>
                  <div
                    class="sport-btn"
                    v-if="modal.type !== 'detail'"
                    @click="showSport('stretchSports', 'add')"
                  >
                    新增
                    <PlusOutlined class="icon-add" />
                  </div>
                </div>
              </a-form-item>
            </template>
          </a-tab-pane>
        </a-tabs>
      </a-form>
      <template #footer>
        <template v-if="modal.type !== 'detail'">
          <a-button
            @click="
              () => {
                ;(modal.open = false), modelForm.clearValidate()
              }
            "
            >取消</a-button
          >
          <a-button :loading="modal.loading" type="primary" @click="modalConfirm">确认</a-button>
        </template>
        <template v-else>
          <a-button @click="modalUpdate" :disabled="!modal.allowUpdate">编辑</a-button>
          <a-button type="primary" @click="modal.open = false">确认</a-button>
        </template>
      </template>
    </a-modal>

    <a-modal
      width="720px"
      v-model:open="sportOpen"
      :title="!sportFormDisable ? '添加运动' : '修改运动'"
      :maskClosable="false"
      ok-text="确认"
      cancel-text="取消"
    >
      <a-form :label-col="{ style: { width: '100px' } }" :model="sportForm" ref="sportFormRef">
        <a-form-item label="运动方式" required name="sport">
          <a-select
            showSearch
            v-model:value="sportForm.sport"
            :options="addSportModalData"
            style="width: 100%"
            placeholder="请选择运动方式"
            :listHeight="200"
            :disabled="sportFormDisable"
            @change="sportModalChange"
            :key="new Date().getTime()"
          />
        </a-form-item>
        <a-form-item :label="sportTimeName" required name="time">
          <a-input-number
            v-model:value="sportForm.time"
            :min="0"
            :step="timeStep"
            :precision="0"
            style="width: 100%"
            @change="sportTimeChange"
          />
          <span style="color: #999">{{ sportTimeName }}需为{{ timeStep }}的倍数</span>
        </a-form-item>
      </a-form>

      <template #footer>
        <a-button
          @click="
            () => {
              ;(sportOpen = false), sportFormRef.clearValidate()
            }
          "
        >
          取消
        </a-button>
        <a-button type="primary" @click="sportConfirm">确认</a-button>
      </template>
    </a-modal>
  </a-card>
</template>

<script lang="ts" setup name="运动方案">
import { ref, reactive, onMounted, nextTick } from 'vue'
import Condition from '@/components/Condition/index.vue'
import { createVNode } from 'vue'
import { getTemplateList, TemplateAdd, TemplateUpdate, TemplateDel } from '@/api/template'
import { ExclamationCircleFilled, PlusOutlined, CloseOutlined } from '@ant-design/icons-vue'
import { message, Modal } from 'ant-design-vue'
import { useDict } from './components/getDict'
import { timeFilter, debounce, throttle } from '@/utils/tools'
import _ from 'lodash'
import store from '@/store'
import { getSportDict } from '@/api/template'

const weekLabel = reactive<any>(['周一', '周二', '周三', '周四', '周五', '周六', '周日'])
const templateType = '运动方案'
const templateName = ref('')

const aerobicData = ref<any>([])
const addSportModalData = ref([])

const sportTypeData = reactive([
  { label: '有氧', value: '1' },
  { label: '抗阻', value: '2' },
  { label: '休息日', value: '3' }
])
const sportWeekIndex = ref(0)
const sportOpen = ref(false)
const sportForm = reactive({
  sport: '',
  time: '',
  sportId: undefined
})
const timeStep = ref<number>(4)
const formatter = (value: any) => {
  return `${value}`.replace(/[^0-9]/g, '') // 仅保留数字
}

const parser = (value: any) => {
  if (value) {
    return parseInt(value.replace(/[^\d]/g, ''), 10) // 将输入解析为整数
  } else {
    return value
  }
}

let { creatorList, manageList, init } = useDict(templateType)

const formState_reset = (item) => {
  if (item) {
    Object.assign(formState, item)
  } else {
    Object.assign(formState, {
      id: '',
      templateName: '',
      templateType: templateType,
      content: {
        week: [
          {
            day: 1,
            warmupSports: [], // 热身
            // 有氧
            aerobicSport: {
              sportId: undefined,
              sportName: undefined,
              total: undefined
            },
            stretchSports: [], // 拉伸
            resistanceSports: [], // 抗阻
            sportType: '1',
            groupNum: undefined
          },
          {
            day: 2,
            warmupSports: [], // 热身
            // 有氧
            aerobicSport: {
              sportId: undefined,
              sportName: undefined,
              total: undefined
            },
            stretchSports: [], // 拉伸
            resistanceSports: [], // 抗阻
            sportType: '1',
            groupNum: undefined
          },
          {
            day: 3,
            warmupSports: [], // 热身
            // 有氧
            aerobicSport: {
              sportId: undefined,
              sportName: undefined,
              total: undefined
            },
            stretchSports: [], // 拉伸
            resistanceSports: [], // 抗阻
            sportType: '1',
            groupNum: undefined
          },
          {
            day: 4,
            warmupSports: [], // 热身
            // 有氧
            aerobicSport: {
              label: undefined,
              time: undefined
            },
            stretchSports: [], // 拉伸
            resistanceSports: [], // 抗阻
            sportType: '1',
            groupNum: undefined
          },
          {
            day: 5,
            warmupSports: [], // 热身
            // 有氧
            aerobicSport: {
              sportId: undefined,
              sportName: undefined,
              total: undefined
            },
            stretchSports: [], // 拉伸
            resistanceSports: [], // 抗阻
            sportType: '1',
            groupNum: undefined
          },
          {
            day: 6,
            warmupSports: [], // 热身
            // 有氧
            aerobicSport: {
              sportId: undefined,
              sportName: undefined,
              total: undefined
            },
            stretchSports: [], // 拉伸
            resistanceSports: [], // 抗阻
            sportType: '1',
            groupNum: undefined
          },
          {
            day: 7,
            warmupSports: [], // 热身
            // 有氧
            aerobicSport: {
              sportId: undefined,
              sportName: undefined,
              total: undefined
            },
            stretchSports: [], // 拉伸
            resistanceSports: [], // 抗阻
            sportType: '1',
            groupNum: undefined
          }
        ]
      },
      templateAffiliation: '公共模板',
      heartRateMin: null,
      heartRateMax: null
    })
  }
}

const formState = reactive({
  id: '',
  templateName: '',
  templateType: templateType,
  content: '',
  templateAffiliation: '公共模板',
  heartRateMin: null,
  heartRateMax: null
})

const condition = ref([
  {
    title: '创建者',
    dataIndex: 'creator',
    type: 'select',
    value: '',
    data: creatorList
  },
  {
    title: '已配置管理路径',
    dataIndex: 'manageId',
    type: 'select',
    value: '',
    data: manageList
  },
  {
    title: '模板类型',
    dataIndex: 'templateAffiliation',
    type: 'select',
    value: '',
    data: [
      {
        value: '',
        label: '全部'
      },
      {
        value: '公共模板',
        label: '公共模板'
      },
      {
        value: '个人模板',
        label: '个人模板'
      }
    ]
  }
])

const conditionReset = () => {
  pagination.current = 1
  init()
  condition.value.map((v) => {
    v.value = ''
  })
  getList()
}

const pagination = reactive({
  current: 1,
  total: 0,
  pageSize: 10,
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '50', '100']
})

const columns = ref([
  {
    title: '序号',
    dataIndex: 'no',
    key: 'no',
    align: 'left',
    width: '50px'
  },
  {
    title: '运动方案名称',
    dataIndex: 'templateName',
    key: 'templateName',
    align: 'left',
    minWidth: 100
  },
  {
    title: '模板类型',
    dataIndex: 'templateAffiliation',
    key: 'templateAffiliation',
    align: 'left',
    width: 100
  },
  {
    title: '已配置管理路径',
    dataIndex: 'managePath',
    key: 'managePath',
    align: 'left',
    minWidth: 200,
    ellipsis: true
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'left',
    width: '140px'
  },
  {
    title: '创建者',
    dataIndex: 'creator',
    key: 'creator',
    align: 'left',
    widht: '80px'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'left',
    width: '200px'
  }
])

const loading = ref(false)
const List = ref([])

const getList = () => {
  loading.value = true
  const { current, pageSize } = pagination
  const obj = condition.value.reduce((c, v) => {
    if (v.value || v.value === 0) {
      return Object.assign(c, { [v.dataIndex]: v.value })
    } else {
      return c
    }
  }, {})
  const params = {
    page: current,
    limit: pageSize,
    templateName: templateName.value,
    templateType: templateType,
    ...obj
  }
  getTemplateList(params)
    .then((res) => {
      loading.value = false
      if (res.data.total > 0 && !res.data.list.length) {
        pagination.current = pagination.current - 1
        getList()
      } else {
        pagination.total = res.data.total
        List.value = res.data.list
      }
    })
    .catch((e) => {
      loading.value = false
    })
}

const paginationChange = (p) => {
  Object.assign(pagination, p)
  getList()
}

const onSearch = () => {
  pagination.current = 1
  getList()
}

const sportDictData = ref([])
onMounted(() => {
  sportDictData.value = []
  getList()
  getSportDict().then((res) => {
    res.data.map((item) => {
      item.value = item.sportName
      item.label = item.sportName
    })
    sportDictData.value = res.data

    aerobicData.value = sportDictData.value.filter((item: any) => {
      return item.isAerobic
    })
  })
})

const modal = reactive({
  open: false,
  type: 'save',
  loading: false,
  allowUpdate: true,
  title: '新建运动方案'
})

const modelForm = ref(null)

const modalShow = (item) => {
  modelForm.value?.clearValidate()
  if (item) {
    modal.title = '运动方案详情'
    modal.type = 'detail'
    const { id, templateName, content, managePath, templateAffiliation } = _.cloneDeep(item)
    formState_reset({
      id,
      templateName,
      templateType,
      content: JSON.parse(content),
      templateAffiliation
    })
    modal.allowUpdate = managePath ? false : true
    modal.open = true
  } else {
    modal.title = '新建运动方案'
    modal.type = 'save'
    formState_reset()
    modal.allowUpdate = true
    modal.open = true
  }

  sportWeekIndex.value = 0
}

const modalConfirm = () => {
  modelForm.value
    .validate()
    .then(() => {
      try {
        formState.content.week.forEach((vo) => {
          if (vo.sportType == '1') {
            if (
              !vo.aerobicSport.sportName ||
              !vo.aerobicSport.total ||
              vo.stretchSports.length == 0 ||
              vo.warmupSports.length === 0
            ) {
              message.error(`运动方案请填写完整`)
              throw Error()
            }
          }

          if (vo.sportType == '2') {
            if (
              vo.actionGroup == 0 ||
              vo.resistanceSports.length == 0 ||
              vo.stretchSports.length == 0 ||
              vo.warmupSports.length === 0
            ) {
              message.error(`运动方案请填写完整`)
              throw Error()
            }
          }
        })
      } catch {
        return
      }

      const sportData: any = formState.content
      sportData.week.forEach((vo) => {
        if (vo.sportType == '1') {
          vo.resistanceSports = []
          vo.groupNum = undefined
        } else if (vo.sportType == '2') {
          vo.aerobicSport = {
            sportId: undefined,
            sportName: undefined,
            total: undefined
          }
        } else if (vo.sportType == '3') {
          Object.assign(vo, {
            warmupSports: [],
            aerobicSport: {
              sportId: undefined,
              sportName: undefined,
              total: undefined
            },
            stretchSports: [],
            resistanceSports: [],
            groupNum: undefined
          })
        }
      })

      const params = {
        ...formState,
        content: JSON.stringify(sportData),
        platformId: store.userStore.platformId
      }
      // const params = { ...formState, platformId: store.userStore.platformId }
      modal.loading = true
      if (modal.type === 'save') {
        TemplateAdd(params)
          .then((res) => {
            modal.loading = false
            message.success('新建成功')
            conditionReset()
            modal.open = false
          })
          .catch((e) => {
            modal.loading = false
          })
      } else {
        TemplateUpdate(params)
          .then((res) => {
            modal.loading = false
            message.success('编辑成功')
            init()
            getList()
            modal.open = false
          })
          .catch((e) => {
            modal.loading = false
            console.log(e)
          })
      }
    })
    .catch((e) => {
      modal.loading = false
      message.error(e.errorFields[0].errors[0])
      // 表单校验失败
      console.log(e)
      modelForm.value.scrollToField(e.errorFields[0].name, {
        behavior: 'smooth',
        block: 'center'
      })
    })
}

const modalUpdate = () => {
  modal.type = 'update'
  modal.title = '编辑运动方案'
}

const delForm = (item) => {
  Modal.confirm({
    title: '删除',
    icon: createVNode(ExclamationCircleFilled, {
      style: {
        color: 'var(--color--danger)'
      }
    }),
    content: '确定删除该方案么',
    okText: '确定',
    okButtonProps: {
      danger: true,
      type: 'primary'
    },
    cancelText: '取消',
    onOk() {
      console.log('OK')
      TemplateDel(item.id).then(() => {
        message.success('删除成功')
        init()
        getList()
      })
    },
    onCancel() {
      console.log('Cancel')
    }
  })
}

//
const sportFormRef = ref<any>()
const sportType = ref<any>('')
const sportTimeName = ref<any>('')
const sportFormDisable = ref<boolean>(false)
const sportActionIndex = ref<any>()
const showSport = (type: any, handleType: any, sportIndex?: any) => {
  sportType.value = type
  sportFormDisable.value = handleType === 'edit' ? true : false

  if (modal.type != 'detail') {
    switch (sportType.value) {
      case 'resistanceSports':
        timeStep.value = 4
        sportTimeName.value = '运动次数'
        addSportModalData.value = sportDictData.value.filter((item: any) => {
          return item.isResistance
        })
        break
      case 'warmupSports':
        timeStep.value = 4
        sportTimeName.value = '运动次数'
        addSportModalData.value = sportDictData.value.filter((item: any) => {
          return item.isWarmup
        })
        break
      case 'stretchSports':
        timeStep.value = 10
        sportTimeName.value = '运动时间(秒)'
        addSportModalData.value = sportDictData.value.filter((item: any) => {
          return item.isStretch
        })
        break
      default:
        timeStep.value = 4
        sportTimeName.value = '运动次数'
        break
    }

    nextTick(() => {
      sportOpen.value = true
      if (sportFormRef.value) {
        sportFormRef.value.clearValidate()
      }
      const data = {
        sport: '',
        time: '',
        sportId: ''
      }

      if (sportIndex != undefined || sportIndex != null) {
        sportActionIndex.value = sportIndex
        data.sport = formState.content.week[sportWeekIndex.value][type][sportIndex].sportName
        data.time = formState.content.week[sportWeekIndex.value][type][sportIndex].total
        data.sportId = formState.content.week[sportWeekIndex.value][type][sportIndex].sportId
      }
      Object.assign(sportForm, data)
    })
  }
}

const sportTimeChange = debounce((value: any) => {
  if (typeof value === 'number') {
    const numValue = Number(value)
    if (!isNaN(numValue)) {
      const adjusted =
        numValue % timeStep.value !== 0
          ? Math.round(numValue / timeStep.value) * timeStep.value
          : numValue

      if (adjusted) {
        sportForm.time = adjusted + ''
      } else {
        sportForm.time = timeStep.value + ''
      }
    }
  }
}, 600)

// 运动方式切换
const sportModalChange = (e: any) => {
  const data: any = addSportModalData.value.find((vo) => vo.label === e)
  sportForm.sportId = data.sportId
}

// 有氧运动切换
const aerobicChange = (child, index, e) => {
  const data: any = aerobicData.value.find((vo: any) => vo.label === e)
  child.aerobicSport.sportId = data.sportId
}

// 运动类型切换
const changesportType = (data: any, index: any, e: any) => {
  if (e.target.value == '3') {
    Object.assign(data, {
      warmupSports: [],
      aerobicSport: {
        sportId: undefined,
        sportName: undefined,
        total: undefined
      },
      stretchSports: [],
      resistanceSports: [],
      groupNum: undefined
    })
  }
}

// 删除
const delSport = (type: any, index: any) => {
  formState.content.week[sportWeekIndex.value][type].splice(index, 1)
}

const sportConfirm = () => {
  sportFormRef.value
    .validate()
    .then(() => {
      const data: any = formState.content.week[sportWeekIndex.value][sportType.value]

      if (sportFormDisable.value) {
        data[sportActionIndex.value] = {
          sportName: sportForm.sport,
          total: sportForm.time,
          sportId: sportForm.sportId
        }
      } else {
        data.push({
          sportName: sportForm.sport,
          total: sportForm.time,
          sportId: sportForm.sportId
        })
      }

      sportOpen.value = false
    })
    .catch((e: any) => {
      console.log(e)
      //
    })
}
</script>

<style lang="less" scoped>
@import './index.less';

.header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .left {
    ::v-deep(.ant-space-item) {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .title {
      font-size: 14px;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      color: #4e5969;
      line-height: 32px;
    }
  }

  .right {
    ::v-deep(.ant-space-item) {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
    }
  }
}

.main {
  flex: 1 1 auto;
  margin-top: 16px;
  overflow: hidden auto;

  :deep(.ant-table-wrapper) {
    .ant-table-cell {
      p {
        white-space: normal;
        margin-bottom: 0;

        .configuration {
          color: #3491fa;
          background: #e8f7ff;
          border-color: #3491fa;
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100%;
          margin-top: 10px;

          &:nth-child(1) {
            margin-top: 0;
          }
        }

        .success {
          color: #00b42a;
          background: #e8ffea;
          border-color: #00b42a;
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100%;
          margin-top: 10px;

          &:nth-child(1) {
            margin-top: 0;
          }
        }
        .groupTag {
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100%;
          margin-top: 10px;
          margin-right: 10px;
          &:nth-child(1) {
            margin-top: 0;
          }
        }
      }
    }
  }
}

.input {
  width: 210px !important;
}

.ant-form .ant-input {
  width: 100% !important;
}

.sport-group {
  padding: 0 4px;
  border: 1px solid #d9d9d9;
  min-height: 42px;
}

.sport-name {
  background: #f2f3f5;
  border-radius: 2px;
  color: #1d2129;
  padding: 5px 8px;
  display: inline-block;
  margin: 4px;
}
.sport-del-icon {
  font-size: 12px;
  color: #4e5969;
  cursor: pointer;
  margin-left: 4px;
}

.sport-time {
  color: #165dff;
  cursor: pointer;
}

.sport-btn {
  cursor: pointer;
  background: #e8f3ff;
  color: #165dff;
  display: inline-block;
  padding: 5px 8px;
  margin: 4px;
}
</style>
